<template>
    <div class="search_input">
        <input @keydown.enter='goSearch(searchTxt)' v-model="searchTxt" @input="SearchLsit" placeholder="搜索您要的产品型号或关键字"/>
        <div class="search_btn" @click="goSearch(searchTxt)">搜索</div>
        <div class="searc_box_chang" v-if="searchList.length" v-loading.fullscreen.lock="fullscreenLoading">
            <div @click="goSearch(item.name)" v-for="(item,index) in searchList" :key="index" v-html="item.name"></div>
        </div>
    </div>
</template>

<script>
    import {searchGoods} from "@/api/apis";

    export default {
        name: "searchBox",
        data() {
            return {
                searchList: [],
                searchTxt: '',
                fullscreenLoading: false
            }
        },
        watch: {
            $route(to, from) {
                if (to.query.name != from.query.name) {
                    this.searchTxt = to.query.name
                    this.searchList = []
                }
            }
        },
        mounted() {
            if (this.$route.query.name) {
                this.searchTxt = this.$route.query.name
            }
        },
        methods: {
            SearchLsit() {
                this.fullscreenLoading = true
                let data = {name: this.searchTxt, type: 1}
                searchGoods(data).then(res => {
                    // if(res.data.length){
                    //   res.data.map(item=>{
                    //     if(item.name.includes(this.searchTxt)){
                    //       item.name = item.name.replace(item.name,'<span style="color:#B11E24">' + item.name + '</span>')
                    //     }
                    //   })
                    // }
                    this.fullscreenLoading = false
                    this.searchList = res.data


                })
            },
            goSearch(e) {
                this.$router.push({name: 'search', query: {name: e}})
            },
        }
    }
</script>

<style scoped lang="less">
    .search_input {
        cursor: pointer;
        width: 536px;
        height: 42px;
        background: #FFFFFF;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        position: relative;
        
        input {
            width: 463px;
            height: 42px;
            background: #FFFFFF;
            border: 1px solid #000000;
            box-sizing: border-box;
            padding: 0 23px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
        }
        
        .search_btn {
            width: 73px;
            height: 42px;
            background: #000000;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 42px;
            color: #FFFFFF;
            text-align: center;
        }
        
        .searc_box_chang {
            width: 463px;
            position: absolute;
            top: 42px;
            padding: 13px 23px 8px;
            background: #FFFFFF;
            border: 1px solid #000000;
            box-sizing: border-box;
            border-top-color: #FFFFFF;
            z-index: 1000;
            
            div {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #9D9D9D;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-bottom: 10px;
            }
            
            div:hover {
                color: #B11E24;
            }
        }
    }
</style>
